// 引入 react 依赖
import React, { Component } from 'react';
import { connect } from 'react-redux';
import { Text, View, Image, TouchableOpacity, ImageBackground, ScrollView, InteractionManager } from 'react-native';

// 引入第三方依赖
import _ from 'lodash';
import pureRender from 'pure-render-decorator';
import { Actions } from 'react-native-router-flux';
import Icon from 'react-native-vector-icons/Ionicons';

// antd 按需加载
import { Tabs, Toast, Portal } from '@ant-design/react-native';

// 引入 处理数据 所需文件
import { relationAccountExamine, relationAccountList, relationRequest, relationRequestList } from '../../module/module.js'

// 引入样式
import Style from './style/style.js';

// 引入公用组件
import { Status, NavBar, CacheImage, LoadingData } from '../../components/index.js'

// 引入专用组件
import { } from './components'

// 引入工具包
import { } from '../../util/images.js';
import { press, size, ScreenWidth, borderBottom, pathHead, defaultDataList, onEndReached, onRefresh, concatDataList, defaultPage } from '../../util/utils.js'

class MyRelatives extends Component {

  constructor(props) {
    super(props)
    this.state = {
      AccountList: [],
      RequestList: []
    }
  }



  componentDidMount() {
    this.relationAccountList()
    this.relationRequestList()
  }

  // 账号关联请求审核
  relationAccountExamine(id, status) {
    // id	integer($int64) 请求ID
    // status	integer($int32) 状态：1同意，2拒绝
    relationAccountExamine({
      id,
      status
    }).then(res => {
      console.log(res, 'res')
      relationAccountList()
      relationRequestList()
    }).catch(error => {
      console.log(error, 'error')
    })
  }

  // 我的关联账号列表
  relationAccountList() {
    relationAccountList()
  }


  // 我的账号关联请求列表
  relationRequestList() {
    relationAccountList()
  }


  render() {
    const { accountList, requestList } = this.props
    return (
      <View style={Style.container}>
        <Status />
        <NavBar
          title="我的亲人"
          back={true}
          extra="绑定亲人"
          extraOnPress={() => Actions.addMyRelatives()}
        />
        <ScrollView style={Style.content}>
          <View style={{ padding: 15 }}>
            <Text style={{ fontSize: 12, color: '#61676F', lineHeight: 16, }}>我的亲人</Text>
          </View>
          <LoadingData
            ref={(r) => this.accountList = r}
            request={() => {
              return relationAccountList()
            }}
            data={accountList}
            rowItem={(item, index) => {
              return (
                <TouchableOpacity onPress={() => Actions.rateList({ id: item.relationAccountId })}>
                  <View
                    key={index}
                    style={{
                      flexDirection: 'row',
                      alignItems: 'center',
                      padding: 15,
                      backgroundColor: '#fff',
                      ...borderBottom()
                    }}>
                    <Image resizeMode='cover' style={{ width: 36, height: 36, marginRight: 10, borderRadius: 18, overflow: 'hidden' }} source={{ uri: `${pathHead}${item.avatar}` }} />
                    <View style={{}}>
                      <Text style={{ fontSize: 16, color: '#61676F', lineHeight: 20, marginBottom: 5 }}>{item.relation}</Text>
                      <Text style={{ fontSize: 14, color: '#61676F', lineHeight: 16, }}>{item.nickname}</Text>
                    </View>
                    <View style={{}}>

                    </View>
                  </View>
                </TouchableOpacity>
              )
            }}
          >
          </LoadingData>
          <View style={{ padding: 15 }}>
            <Text style={{ fontSize: 12, color: '#61676F', lineHeight: 16, }}>申请关注</Text>
          </View>
          <LoadingData
            ref={(r) => this.requestList = r}
            request={() => {
              return relationRequestList()
            }}
            data={requestList}
            rowItem={(item, index) => {
              return (
                <View
                  key={index}
                  style={{
                    flexDirection: 'row',
                    alignItems: 'center',
                    padding: 15,
                    backgroundColor: '#fff',
                    ...borderBottom()
                  }}>
                  <Image resizeMode='cover' style={{ width: 36, height: 36, marginRight: 10, borderRadius: 18, overflow: 'hidden' }} source={{ uri: `${pathHead}${item.avatar}` }} />
                  <View style={{ flex: 1 }}>
                    <Text style={{ fontSize: 16, color: '#61676F', lineHeight: 20, marginBottom: 5 }}>{item.nickname}</Text>
                    <Text style={{ fontSize: 14, color: '#61676F', lineHeight: 16, }}>{item.remark}</Text>
                  </View>
                  {item.status == 1 && (
                    <Text style={{ fontSize: 14, color: '#61676F', lineHeight: 16, }}>已同意</Text>
                  )}
                  {item.status == 2 && (
                    <Text style={{ fontSize: 14, color: '#61676F', lineHeight: 16, }}>已拒绝</Text>
                  )}
                  {item.status == 0 && (
                    <View style={{ flexDirection: 'row', alignItems: 'center', }}>
                      <TouchableOpacity
                        onPress={() => {
                          this.relationAccountExamine(item.id, 1)
                        }}
                      >
                        <Icon name="md-checkmark-circle-outline" size={30} color={'#61676F'} />
                      </TouchableOpacity>
                      <TouchableOpacity
                        style={{ marginLeft: 15 }}
                        onPress={() => {
                          this.relationAccountExamine(item.id, 2)
                        }}
                      >
                        <Icon name="md-close-circle-outline" size={30} color={'#61676F'} />
                      </TouchableOpacity>
                    </View>
                  )}
                </View>
              )
            }}
          >
          </LoadingData>
        </ScrollView>
      </View >
    );
  }
}


export default connect(({ user, accountList, requestList }) => ({
  user, accountList, requestList
}))(pureRender(MyRelatives))
